<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> react传统方式引入网页</title>

</head>

<body>
    <h3>如何在不使用npm或yarn的情况下，使用传统方式引入React库并在页面中使用它？</h3>
    <div>2024-01-10</div>
    <div id="root"></div>
    <!-- 1. 引入React核心库 :注意：<script>标签引入React相关JS库时，需要先引入React核心库（＊）！-->
    <script src="js/react18.2.0.production.min.js"></script>
    <!-- 2. 引入react-dom扩展库，用于操作DOM -->
    <script src="js/react-dom18.2.0.production.min.js"></script>
    <!-- 3.  引入Babel，将JSX转为JS -->
    <script src="js/babel7.23.8.min.js"></script>


    <!-- type必须是 text/babel否则不识别jsx语法 -->
    <script type="text/babel">
        // 1. 创建虚拟DOM
        const VDOM = <div><h1>hello react</h1><Blog></Blog></div> //此处不需要加引号，这是JSX语法

        // 2. 渲染虚拟DOM
        ReactDOM.render(VDOM, document.getElementById('root'))

        function Blog(){
            return (
                <>
                    <h1>blog title</h1>
                    <div>blog content</div>
                </>
            )
        }
    </script>
</body>

</html>